import React, { useEffect, useState } from 'react'

const App = () => {
  // 使用 hooks: 钩子函数

  // 1. 可以通过useState声明函数内部状态数据
  // useState 返回值是一个 数组（元组）
  // 第一项是用来接受的值
  // 第二项是修改该值的唯一方法
  const [count, setCount] = useState(1)

  // 2. 通过useEffect模仿类组件的生命周期函数
  //  语法： useEffect(callback, desp?)
  //  情况一： callback 在组件首次渲染完毕会执行一次
  //  情况二： desp这个依赖的数组项， 发生改变的时候，会更新执行一次
  //  情况三： callback函数的返回值， 会在组件销毁的时候执行一次，以及在每次更新的时候执行一次

  useEffect(() => {
    console.log(1);
    console.log(document.querySelector('button'))
    return () => {

    }
  }, [count])


  return (
    <div>
      <h1>App 函数组件</h1>
      <h3>count: { count }</h3>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}


export default App